<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>潮玩订单详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        labubu: {
                            primary: '#FF6B9B', // 主色调：粉色
                            secondary: '#9A7DFF', // 辅助色：紫色
                            accent: '#FFD166', // 强调色：黄色
                            light: '#FFF5F8', // 浅色背景
                            dark: '#5A5A5A'   // 深色文本
                        }
                    },
                    fontFamily: {
                        labubu: ['"Comic Sans MS"', '"Marker Felt"', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .labubu-shadow {
                box-shadow: 0 4px 20px rgba(255, 107, 155, 0.3);
            }
            .labubu-gradient {
                background: linear-gradient(135deg, #FF6B9B 0%, #9A7DFF 100%);
            }
            .labubu-btn {
                @apply bg-labubu-primary text-white font-bold py-2 px-4 rounded-full transition-all duration-300 hover:shadow-lg hover:scale-105 active:scale-95;
            }
            .labubu-pagination {
                @apply flex justify-center items-center mt-6 space-x-2;
            }
            .labubu-page-btn {
                @apply w-10 h-10 flex items-center justify-center rounded-full transition-all duration-300;
            }
            .labubu-page-btn.active {
                @apply bg-labubu-primary text-white labubu-shadow;
            }
            .labubu-page-btn:not(.active) {
                @apply border border-labubu-primary text-labubu-primary hover:bg-labubu-primary/10;
            }
            .labubu-card {
                @apply bg-white rounded-2xl labubu-shadow p-6 mb-6;
            }
        }
    </style>
</head>
<body class="bg-labubu-light min-h-screen font-labubu">
<!-- 顶部导航 -->
<nav class="bg-white labubu-shadow sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-shopping-bag text-labubu-primary text-2xl"></i>
            <span class="text-xl font-bold text-labubu-dark">潮玩商城</span>
        </div>
        <button class="labubu-btn flex items-center" onclick="window.location.href='/order/myOrders'">
            <i class="fa fa-arrow-left mr-2"></i>
            <span>我的订单</span>
        </button>
    </div>
</nav>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
        <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-labubu-primary mb-2">
            <i class="fa fa-gift text-labubu-accent"></i> 订单详情
        </h1>
        <p class="text-labubu-dark opacity-80">订单号: <span class="font-bold text-labubu-secondary">${order.oid}</span></p>
    </div>

    <!-- 订单信息卡片 -->
    <div class="labubu-card">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="text-lg font-bold text-labubu-dark mb-4 border-b border-labubu-primary/30 pb-2">
                    <i class="fa fa-info-circle text-labubu-primary"></i> 订单信息
                </h3>
                <div class="space-y-3">
                    <p class="flex items-center">
                        <span class="w-24 text-labubu-dark opacity-70">订单状态:</span>
                        <span class="font-bold text-labubu-primary">
                                <c:choose>
                                    <c:when test="${order.status == '0'}">
                                        <i class="fa fa-clock-o mr-1"></i> 待付款
                                    </c:when>
                                    <c:when test="${order.status == '1'}">
                                        <i class="fa fa-credit-card mr-1"></i> 已付款
                                    </c:when>
                                    <c:when test="${order.status == '2'}">
                                        <i class="fa fa-truck mr-1"></i> 已发货
                                    </c:when>
                                    <c:when test="${order.status == '3'}">
                                        <i class="fa fa-check-circle mr-1"></i> 已完成
                                    </c:when>
                                    <c:otherwise>
                                        <i class="fa fa-question-circle mr-1"></i> 未知状态
                                    </c:otherwise>
                                </c:choose>
                            </span>
                    </p>
                    <p class="flex items-center">
                        <span class="w-24 text-labubu-dark opacity-70">下单时间:</span>
                        <span class="font-medium">${order.created}</span>
                    </p>
                    <p class="flex items-center">
                        <span class="w-24 text-labubu-dark opacity-70">总金额:</span>
                        <span class="font-bold text-labubu-secondary text-xl">¥${order.total}</span>
                    </p>
                </div>
            </div>
            <div>
                <h3 class="text-lg font-bold text-labubu-dark mb-4 border-b border-labubu-primary/30 pb-2">
                    <i class="fa fa-heart text-labubu-primary"></i> wzh祝福
                </h3>
                <div class="bg-labubu-primary/10 rounded-xl p-4 border border-labubu-primary/20">
                    <p class="text-labubu-dark italic">"感谢您的购买！希望您喜欢我们的潮玩商品，愿您的每一天都充满色彩和惊喜！"</p>
                    <div class="mt-3 text-right">
                        <img src="https://picsum.photos/id/237/40/40" alt="Labubu" class="w-10 h-10 rounded-full inline-block mr-2">
                        <span class="text-labubu-primary font-bold">wzh团队</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单商品列表 -->
    <div class="labubu-card">
        <h3 class="text-lg font-bold text-labubu-dark mb-4 border-b border-labubu-primary/30 pb-2">
            <i class="fa fa-shopping-cart text-labubu-primary"></i> 商品详情
        </h3>
        <div class="overflow-x-auto">
            <table class="w-full min-w-[600px]">
                <thead>
                <tr class="bg-labubu-primary/10">
                    <th class="py-3 px-4 text-left text-labubu-dark font-bold">商品ID</th>
                    <th class="py-3 px-4 text-left text-labubu-dark font-bold">商品名称</th>
                    <th class="py-3 px-4 text-center text-labubu-dark font-bold">单价</th>
                    <th class="py-3 px-4 text-center text-labubu-dark font-bold">数量</th>
                    <th class="py-3 px-4 text-right text-labubu-dark font-bold">小计</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${details}" var="detail">
                    <tr class="border-b border-labubu-primary/10 hover:bg-labubu-primary/5 transition-colors">
                        <td class="py-3 px-4">${detail.goodsId}</td>
                        <td class="py-3 px-4 font-medium">Labubu系列 #${detail.goodsId}</td>
                        <td class="py-3 px-4 text-center">¥${detail.price}</td>
                        <td class="py-3 px-4 text-center">${detail.qty}</td>
                        <td class="py-3 px-4 text-right font-bold">¥${detail.price * detail.qty}</td>
                    </tr>
                </c:forEach>
                <c:if test="${empty details}">
                    <tr>
                        <td colspan="5" class="py-6 text-center text-labubu-dark opacity-60">
                            <i class="fa fa-frown-o mr-2"></i> 暂无订单详情
                        </td>
                    </tr>
                </c:if>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 分页导航 -->
    <div class="labubu-pagination">
        <c:if test="${currentPage > 1}">
            <a href="${pageContext.request.contextPath}/orderDetail/list/${order.oid}?page=${currentPage - 1}&size=10"
               class="labubu-page-btn">
                <i class="fa fa-angle-left"></i>
            </a>
        </c:if>

        <!-- 页码显示优化：只显示当前页附近的页码 -->
        <c:set var="startPage" value="${currentPage - 2 < 1 ? 1 : currentPage - 2}" />
        <c:set var="endPage" value="${startPage + 4 > totalPages ? totalPages : startPage + 4}" />

        <c:if test="${startPage > 1}">
            <a href="${pageContext.request.contextPath}/orderDetail/list/${order.oid}?page=1&size=10"
               class="labubu-page-btn">1</a>
            <c:if test="${startPage > 2}">
                <span class="text-labubu-dark opacity-50">...</span>
            </c:if>
        </c:if>

        <c:forEach begin="${startPage}" end="${endPage}" var="pageNum">
            <c:choose>
                <c:when test="${pageNum == currentPage}">
                    <span class="labubu-page-btn active">${pageNum}</span>
                </c:when>
                <c:otherwise>
                    <a href="${pageContext.request.contextPath}/orderDetail/list/${order.oid}?page=${pageNum}&size=10"
                       class="labubu-page-btn">${pageNum}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>

        <c:if test="${endPage < totalPages}">
            <c:if test="${endPage < totalPages - 1}">
                <span class="text-labubu-dark opacity-50">...</span>
            </c:if>
            <a href="${pageContext.request.contextPath}/orderDetail/list/${order.oid}?page=${totalPages}&size=10"
               class="labubu-page-btn">${totalPages}</a>
        </c:if>

        <c:if test="${currentPage < totalPages}">
            <a href="${pageContext.request.contextPath}/orderDetail/list/${order.oid}?page=${currentPage + 1}&size=10"
               class="labubu-page-btn">
                <i class="fa fa-angle-right"></i>
            </a>
        </c:if>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-labubu-gradient text-white py-6 mt-12">
    <div class="container mx-auto px-4 text-center">
        <p class="mb-4">感谢您选择 潮玩商城！</p>
        <div class="flex justify-center space-x-4 mb-4">
            <a href="#" class="text-white hover:text-labubu-accent transition-colors">
                <i class="fa fa-facebook"></i>
            </a>
            <a href="#" class="text-white hover:text-labubu-accent transition-colors">
                <i class="fa fa-instagram"></i>
            </a>
            <a href="#" class="text-white hover:text-labubu-accent transition-colors">
                <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="text-white hover:text-labubu-accent transition-colors">
                <i class="fa fa-pinterest"></i>
            </a>
        </div>
        <p class="text-sm opacity-80">© 2025 潮玩商城. 保留所有权利.</p>
    </div>
</footer>
</body>
</html>